<!DOCTYPE html>
<html>
<head>
    <style>
        /* 添加 html 样式 */
        html {
            background-color: black;
        }

        body {
            margin: 0;
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }
        .video-container {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black; /* 确保容器也是黑色 */
        }
        video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: 'block'; /* 初始化时隐藏视频 */
            background-color: black; /* 确保视频元素背景也是黑色 */
        }
        /* 隐藏音量控制按钮 */
        video::-webkit-media-controls-volume-slider,
        video::-webkit-media-controls-mute-button,
        video::-webkit-media-controls-fullscreen-button {
            display: none;
        }
    </style>
    <script>
        // 创建一个全局的播放器对象
        window.videoPlayer = {
            play: function() {
                var video = document.querySelector('video');
                if (video) {
                    video.muted = false;
                    return new Promise((resolve) => {
                        // 确保视频可以播放
                        var canPlayHandler = function() {
                            video.removeEventListener('canplay', canPlayHandler);
                            video.play().catch(function(error) {
                                console.log('播放失败:', error);
                                resolve(false);
                            }).then(() => resolve(true));
                        };
                        if (video.readyState >= 3) { // HAVE_FUTURE_DATA
                            canPlayHandler();
                        } else {
                            video.addEventListener('canplay', canPlayHandler);
                            video.load();
                        }
                    });
                }
                return Promise.resolve(false);
            },
            pause: function() {
                var video = document.querySelector('video');
                if (video) {
                    video.pause();
                }
            }
        };

        // 在页面加载完成后初始化视频
        document.addEventListener('DOMContentLoaded', function() {
            var video = document.querySelector('video');
            if (!video) return;

            // 防抖函数
            function debounce(fn, delay) {
                let timer = null;
                return function() {
                    if (timer) {
                        cancelAnimationFrame(timer);
                    }
                    timer = requestAnimationFrame(() => {
                        fn.apply(this, arguments);
                        timer = null;
                    });
                };
            }

            // 处理 ResizeObserver 错误
            const resizeCallback = debounce((entries) => {
                if (!Array.isArray(entries) || !entries.length) {
                    return;
                }
                // 这里可以添加尺寸变化的处理逻辑
            }, 16);

            const observer = new ResizeObserver(resizeCallback);
            observer.observe(video);

            // 监听时长变化
            video.addEventListener('durationchange', function() {
                console.log('Duration changed:', video.duration);
                if (!isFinite(video.duration)) {
                    // 尝试手动计算时长
                    var seekHandler = function() {
                        video.removeEventListener('seeked', seekHandler);
                    };
                    video.addEventListener('seeked', seekHandler);
                    video.currentTime = 100000;
                } else {
                    // 计算出时长后显示视频
                    //video.style.display = 'block';
                    video.currentTime = 0;
                    //video.muted = false;
                }
            });
            // 设置预加载
            video.preload = 'auto';
            video.load();
        });
    </script>
</head>
<body>
    <div class="video-container">
        <video controls play>
            <source src="%1" />
            Your browser does not support the video tag.
        </video>
    </div>
</body>
</html>

